<template>
	<view>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/property-bg@2x.png" mode="widthFix"
			class="property-bg"></image>


		<view class="index-nav" :style="{
			background: scrollTop > 50 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
			<view class="status_bar">

			</view>
			<view class="flex items-center wxjb py-32">
				<view class="flex items-center">
					<!-- #ifdef MP-WEIXIN -->
					<u-icon name="arrow-left" :bold="true" color="#FFF" class="mr-24" @click="$tab.back()"></u-icon>
					<!-- #endif -->
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/property-title@2x.png"
						class="index-title" mode="heightFix"></image>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<view class="" style="width: 32rpx;">

				</view>
				<!-- #endif -->

				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_xiaoxi@2x.png"
					class="index-xiaoxi" mode="" @click="$tab.nav(`/pages/index/notice/index`)"></image>
			</view>
		</view>

		<view class="">
			<view class="status_bar">

			</view>
			<view class="" style="height: 48rpx;">

			</view>
		</view>

		<view class="content px-20 mt-32 pt-16">
			<!-- 	<view class="nav-top pt-36 pl-32">
				<view class="text-FFF" style="width: 250rpx;">
					<view class="font-700" style="font-size: 48rpx;">
						{{goldValue}}
					</view>
					<view class="mt-12">
						我的金豆
					</view>
				</view>
			</view> -->

			<view class="nav-top py-28 flex justify-around items-center mt-32">
				<view class="flex flex-col items-center">
					<view class="font-700" style="font-size: 48rpx;color: #553405;">
						{{goldValue}}
					</view>
					<view class="" style="color: #A57024;">
						我的熵豆
					</view>
				</view>

				<div class="nav-line"></div>

				<div class="toufang text-center" style="color: #553405;"
					@click="$tab.nav('/pages/index/shangdoujiaoyi/toufang')">
					查看熵豆释放量
				</div>
			</view>

			<view class="jindou flex items-center flex-col mt-16 bg-FFF round-16 p-32">
				<view class="font-600">
					最近七日价格走势图
				</view>
				<view class="mt-12" style="color: #FD212C;">
					X:日期 Y:价格
				</view>
				<view class="charts-box mt-12">
					<!-- #ifdef APP-PLUS || H5 -->
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
					<!-- #ifdef MP -->
					<qiun-data-charts type="area" :opts="opts" :canvas2d="true" :chartData="chartData" />
					<!-- #endif -->
				</view>
			</view>

			<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/zichan-shangdoujiaoyi@2x.png"
				class="w-full mt-32" mode="widthFix" @click="$tab.nav('/pages/index/shangdoujiaoyi/index')"></image>

			<div class="gongxiangcang mt-32" v-if="gongshe">
				<!-- <div class="pl-24">
					<span>公社共享仓</span>
					<span style="font-weight: 700;color:#E80F0F;margin:0 8rpx 0 16rpx">|</span>
					<span style="color:#E80F0F;font-size: 26rpx;">周冠军可获得共享仓10%的分红激励</span>
				</div> -->
				<div class="text-40 text-center font-700" style="color: #582627;">
					公社共享仓
				</div>

				<div class="px-12 mt-32">
					<div class="bg-FFF px-20 py-12 round-4 flex items-center justify-between"
						style="color:#FF561D;background: #FFCAE8;">
						<div class="">
							预计分红时间：
						</div>
						<div class="font-700">
							{{gongshe.gongshegongxiangcang.bonusTime}}
						</div>
					</div>
				</div>

				<div class="flex items-center justify-between mt-48">
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshegongxiangcang.huangjindaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							黄金达人
						</div>
					</div>
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshegongxiangcang.baijindaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							白金达人
						</div>
					</div>
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshegongxiangcang.zuanshidaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							钻石达人
						</div>
					</div>
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshegongxiangcang.champion}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							本周冠军
						</div>
					</div>
				</div>
			</div>

			<div class="gongshe mt-32" v-if="gongshe">
				<div class="text-40 text-center font-700" style="color: #3A2663;">
					商圈激励仓
				</div>
				<div class="px-12">
					<div class="px-20 py-24 round-4 flex items-center justify-between" style="background: rgba(255,239,248,0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #F4E5FF;margin-top: 56rpx;">
						<div class="">
							预计分红时间：
						</div>
						<div class="font-700 text-32" style="color: #4F049C;">
							{{gongshe.gongshejilucang.bonusTime}}
						</div>
					</div>
				</div>
				<!-- <div class="px-12 mt-48">
					<div class="px-20 py-24 round-4 flex items-center justify-between" style="background: rgba(255,239,248,0.1);
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #F4E5FF;">
						<div class="">
							预计分红总额：
						</div>
						<div class="font-700 text-32" style="color: #4F049C;">
							{{gongshe.gongshejilucang.bonusAmount}}
						</div>
					</div>
				</div> -->
				<div class="px-32 flex justify-around items-center mt-24">
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshejilucang.huangjindaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							黄金达人
						</div>
					</div>
					
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshejilucang.baijindaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							白金达人
						</div>
					</div>
					
					<div class="gongxiangcang-box pt-28 flex flex-col align-center">
						<div class="text-20">
							预计分红
						</div>
						<div class="font-700" style="color: #FD2623;">
							{{gongshe.gongshejilucang.zuanshidaren}}
						</div>
						<div class="mt-44 font-500" style="color: #962B00;">
							钻石达人
						</div>
					</div>
				</div>
			</div>


			<div class="px-44 py-48 mt-32 round-16 flex items-center justify-between"
				style="background: linear-gradient( 135deg, #FFC745 0%, #FF8E32 100%);;color: #6D320D;"
				@click="$tab.nav(`/pages/mine/currency/index`)">
				<div class="flex items-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/mine/zichan@2x.png" mode=""
						class="image-72"></image>

					<div class="ml-24 flex flex-col items-center">
						<!-- <div class="text-40 font-700">32553</div> -->
						<div class="text-36 font-700">我的资产</div>
					</div>
				</div>

				<div class="detail flex items-center justify-around">
					<div class="flex items-center">
						<div class="">详情</div>
						<u-icon name="arrow-right" color="#6D320D" size="14"></u-icon>
					</div>
				</div>
			</div>





			<!-- <view class="footer mt-28 p-28 grid grid-cols-4 gap-4">
				<view class="flex flex-col items-center" v-for="(item,index) in footerList" :key="index"
					@click="$modal.msg('功能尚在开放中!')">
					<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/${item.icon}`" mode=""
						class="image-56"></image>
					<view class="mt-12">
						{{item.name}}
					</view>
				</view>
			</view> -->

			<view class="mt-28 grid grid-cols-4 gap-4">
				<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/${item}`" mode="widthFix"
					v-for="(item,index) in footImgList" :key="index" @click="$modal.msg('功能尚在开放中!')"></image>
			</view>

			<view class="" style="height: 50rpx;">

			</view>
		</view>

		<u-popup :show="soldShow" bgColor="transparent" mode="center" @close="soldShow = false"
			:safe-area-inset-bottom="false">
			<view class="soldWrap flex flex-col items-center relative">
				<div class="sold-close" @click="soldShow = false">
					<u-icon name="close" :bold="true" size="20px"></u-icon>
				</div>

				<view class="flex items-end">
					<view class="" style="color: #C4816B;padding-bottom: 4rpx;">
						申请上货需要缴
					</view>
					<view class="text-44 font-700 mt-8" style="color: #FE6835;">
						10000
					</view>
					<view class="" style="color: #C4816B;padding-bottom: 4rpx;">
						元保证金
					</view>
				</view>

				<view class="soldContent mt-48 py-48 flex flex-col justify-between items-center">
					<input type="text" class="input text-center" placeholder="请输入上货名称" placeholder-style="color:#997983"
						v-model="soldValue" />
				</view>

				<view class="soldConfirm text-FFF text-center text-32" @click="handleRelease">
					确认上货
				</view>
			</view>
		</u-popup>

		<payWay :payShow="payShow" @payWayConfirm="payWayConfirm" @payClose="payShow = false"></payWay>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),pay_password = false">
					确认
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import {
		throttle
	} from "throttle-debounce";
	import payWay from "@/components/payWay.vue"
	var thro;
	export default {
		components: {
			payWay
		},
		data() {
			return {
				opts: {
					canvas2d: true,
					legend: {
						show: false,
					},
					yAxis: {
						data: [{
							min: 1
						}]
					},
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true
						},
					}
				},
				chartData: {},

				scrollTop: 0,
				goldValue: null,

				footerList: [{
						name: "我的债务",
						icon: "icon_wodezhaiwu@2x.png"
					},
					{
						name: "债务清单",
						icon: "icon_zhaiwuqingdan@2x.png"
					},
					{
						name: "信用卡托管",
						icon: "icon_xinyongkatuoguan@2x.png"
					},
					{
						name: "资产发布",
						icon: "icon_zichanfabu@2x.png"
					},
					{
						name: "债积分",
						icon: "icon_zhaijifen@2x.png"
					},
					{
						name: "请帮还",
						icon: "icon_qingbanghuan@2x.png"
					},
					{
						name: "债务咨询",
						icon: "icon_zhaiwuzixun@2x.png"
					},
				],
				footImgList: [
					'icon_xinyong.png',
					'img_zichanpinggu@2x.png',
					'img_aixinchuandi@2x.png',
					'img_anzhuanzhongxin@2x.png'
				],

				soldShow: false,
				soldContent: "预计支付金额",
				soldValue: "",
				payShow: false,
				list: [],
				pay_password: false,
				payPassword: "",
				sellId: null,
				sellValue: null,
				jindou: null,
				globalConfig: getApp().globalData.config,
				isIntegral: null,

				gongshe: null
			};
		},
		onPageScroll(e) {
			thro.scrollTop = e.scrollTop
		},
		onShow() {
			thro = this
			thro.getData()
		},
		methods: {
			confirmOrder: throttle(2000, async () => {
				thro.pay_password = false
				if (!thro.payPassword || thro.payPassword.length != 6) {
					thro.$modal.msg('请输入支付密码!')
					return
				}

				// #ifdef APP || H5
				let form = {
					id: thro.sellId,
					payNum: thro.sellValue,
					payPassword: thro.payPassword
				}
				// #endif

				// #ifdef MP-WEIXIN
				let form = {
					id: thro.sellId,
					payNum: thro.sellValue,
					payPassword: thro.payPassword,
					receiveType: 0
				}
				// #endif
				const res = await thro.$Api.property.marketReceive(form)
				thro.payPassword = ""
				thro.$modal.msg('卖出成功!')
				thro.getData()
				thro.refresh()
			}, {
				noTrailing: true
			}),
			async handleSell(row) {
				// #ifdef APP || H5
				if (!thro.$store.getters.userInfo.zfbOpenId) {
					thro.$modal.confirm('请先完成支付宝登录校验，方便卖出成功后转账到您的支付宝!').then(con => {
						if (con) {
							thro.$tab.nav(`/pages/mine/setting/account`)
						}
					})
					return
				}
				// #endif

				// #ifdef MP-WEIXIN
				if (!thro.$store.getters.userInfo.zfbOpenId) {
					thro.$modal.msg('请先在app端绑定支付宝账户!')
					return
				}
				// #endif

				if (!row.sellValue || row.sellValue == "" || row.sellValue <= 0 || !thro.isInteger(Number(row
						.sellValue))) {
					thro.$modal.msg('请输入大于等于1的整数')
					return
				}

				if (row.sellValue > row.needJindouNum) {
					thro.$modal.msg('卖出数量大于求购数量!')
					return
				}

				thro.sellId = row.id
				thro.sellValue = row.sellValue
				thro.payShow = false
				thro.pay_password = true
			},
			handleRelease() {
				if (!thro.soldValue) {
					thro.$modal.msg('请输入上货名称!')
					return
				}
				thro.soldShow = false
				thro.payShow = true
			},
			handleBuy() {
				thro.soldContent = "预计支付金额"
				thro.soldValue = ""
				thro.soldShow = true
			},
			async payWayConfirm(e) {
				thro.payShow = false

				const res = await thro.$Api.index.marketBondPay({
					name: thro.soldValue,
					payWay: e
				})

				if (e == 2 || e == 0) {
					const wxPay = thro.$pay.WeChatPay(res)
				} else {
					const alyPay = thro.$pay.Alipay(res.data)
				}
			},
			async getData() {
				const gongshe = await thro.$Api.index.communityInfo()
				thro.gongshe = gongshe

				const chart = await this.$Api.property.shangdouChart()
				this.opts.yAxis.data[0].min = chart.prices[0]
				let linearareadata = {
					categories: chart.dates,
					series: [{
						name: "",
						color: "#FF8B43",
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FF8B43' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: chart.prices,
					}],
				}
				this.chartData = JSON.parse(JSON.stringify(linearareadata));




				const userRichInfo = await thro.$Api.user.userRichInfo()
				userRichInfo.data.forEach(item => {
					switch (item.moneyId) {
						case 12:
							thro.goldValue = item.amount
							break
					}
				})
			},
			isInteger(obj) {
				return typeof obj === 'number' && obj % 1 === 0
			},
			// async soldValueChange() {
			// 	if (thro.soldValue <= 0 || !thro.isInteger(Number(thro.soldValue))) {
			// 		thro.soldValue = null
			// 		thro.$modal.msg('请输入大于等于1的整数!')
			// 		return
			// 	}
			// 	if (thro.soldValue == "" || !thro.soldValue) {
			// 		thro.soldContent = "预计支付金额"
			// 		return
			// 	}
			// 	const res = await thro.$Api.property.countNum({
			// 		price: thro.soldValue
			// 	})
			// 	thro.soldContent = res
			// }
		}
	}
</script>

<style lang="scss">
	.gongxiangcang {
		height: 400rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/gongshe_bg@2x.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 24rpx;

		.gongxiangcang-box {
			width: 172rpx;
			height: 172rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/daren@2x.png') no-repeat;
			background-size: 100% 100%;

		}
	}

	.gongshe {
		height: 420rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/shangquan_bg@2x.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 24rpx;

		.gongxiangcang-box {
			width: 172rpx;
			height: 172rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/fenhong@2x.png') no-repeat;
			background-size: 100% 100%;

		}
	}



	.property-bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.duihuan {
		width: 336rpx;
		height: 196rpx;
		margin-bottom: 32rpx;
	}

	.duihuan-btn {
		width: 96rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFF;
	}

	.zongcai {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zongcai@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.zongjian {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/zongjie@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.jingli {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/jingli@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	.huiyuan {
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/huiyuan@2x.png) no-repeat;
		background-size: 100% 100%;
	}

	/* #ifndef MP-WEIXIN */
	.wxjb {
		justify-content: space-between;
	}

	/* #endif */

	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}
	}


	.content {
		position: relative;
		z-index: 2;
		width: 100%;

		// .nav-top {
		// 	width: 100%;
		// 	height: 176rpx;
		// 	background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/img_renrenchidou@2x.png) no-repeat;
		// 	background-size: 100% 100%;
		// }

		.nav-top {
			width: 100%;
			height: 144rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/wod_shang_bg@2x.png) no-repeat;
			background-size: 100% 100%;

			.nav-line {
				width: 2rpx;
				height: 48rpx;
				background: #E4AC5C;
			}

			.toufang {
				width: 250rpx;
				height: 68rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #D0800D;
				line-height: 68rpx;
			}
		}

		.jindou {
			.charts-box {
				width: 100%;
				height: 314rpx;
				background: #F6F6F6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}



		.footer {
			height: 314rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/pro-b-bg@2x.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.soldWrap {
		width: 686rpx;
		height: 918rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/img_fabuqiugou@2xv2.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -100rpx;
		padding: 468rpx 0 48rpx 0;

		.sold-close {
			position: absolute;
			top: 286rpx;
			right: 32rpx;
		}

		.soldContent {
			width: 622rpx;
			height: 304rpx;
			background: #FCF4F7;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4DEE5;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				line-height: 88rpx;

			}
		}

		.soldConfirm {
			width: 322rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 88rpx;
			margin-top: 32rpx;
		}
	}

	.detail {
		width: 152rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		color: #6D320D;
		line-height: 1;
	}
</style>